<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<script src="mustache.js"></script>
<title>sites_without_servers</title>
<style>
body {background:#ff0;}
div#main 
{
	background:#cc0;
	height:82%;
	weight:80%;
	padding:10%;
	border: black 1px solid;
	-webkit-border-radius: 10px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="main">
	<h1>List some food</h1>
	<form id="foodForm">
	<input type="text" id="foodname" placeholder="A name of a food"/>
	<button id="submitfood">Tell us!</button>
	</form>
	
	<ul id="foodlist">
	</ul>
</div>
</body>

<script>
document.addEventListener("DOMContentLoaded",
function()
{
	var foodlist=document.getElementById("foodlist");
	var foodfeild=document.getElementById("foodname");
	var l=window.localStorage.length;
	var i=0;
	var storedfoodname;
	function addnewfooditem(foodname)
	{
		var newfooditem=document.createElement("li");
		console.log(foodname.value);
		newfooditem.innerHTML=foodname;
		foodlist.appendChild(newfooditem);
	}
	for (i;i<l;i++)
	{
		storedfoodname=window.localStorage.key(i);
		//console.log("key:"+storedfoodname);
		addnewfooditem(window.localStorage.getItem(storedfoodname));
	}
	
	document.getElementById("foodForm").addEventListener("submit",
	function (evt)
	{
		evt.preventDefault();
		var newfood=foodfeild.value;
		var newfooditem=document.createElement("li");
		newfooditem.innerHTML= newfood;
		foodlist.appendChild(newfooditem);
		var foodkey=window.localStorage.length+1;
		window.localStorage.setItem(foodkey,newfood);
		foodfeild.value="";
		return false;
	}
	,false
	);
}
);
</script>
</html>
